HTML 简介
什么是 HTML
HTML 是一种使用标签来描述页面的内容和结构的语言。
- HTML 指的是超文本标记语言(Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 的发展史
HTML 的产生
1991年,Tim Berners-Lee编写了一份叫做“HTML标签”的文档,里面包含了大约20个用来标记网页的HTML标签。他直接借用SGML的标记格式,也就是后来我们看到的HTML标记的格式。
从IETF到W3C:HTML 4之路
HTML 1并不曾存在,HTML的第一个官方版本就是由IETF(互联网工程任务组)推出的HTML 2.0。
后来,W3C取代IETF的角色,成为HTML的标准组织,1990年代的后半页,HTML的版本被频繁修改,1997年发布了HTML 3.2,1999年发布了HTML 4.01, 至此,HTML到达了它的第一个拐点。
HTML 3.2 特点:
- Netscape 引入私有标签
- HTML 3.0 失败
- W3C 接管 HTML 标准化
HTML 4.01 特点
- 样式与内容分离,CSS 支持
- Doctype
- 指定HTML页面使用的标准和版本
- 浏览器根据doctype决定使用哪种渲染模式
XHTML 1.0:XML风格的HTML
HTML在HTML 4.01之后的第一个修订版本就是XHTML 1.0。XHTML 1.0是基于HTML 4.01的,用 XML 语法重新定义 HTML,并没有引入任何新标签或属性,唯一的区别是语法,HTML对语法比较随便,而 XHTML则要求XML般的严格语法。
出力不讨好的XHTML 2
对W3C而言,到了HTML 4已经是功德圆满,他们的下一步工作是XHTML 2,希望将Web带向XML的光明未来。虽然XHTML 2听上去和XHTML 1类似,它们却有很多差别。
XHTML 2 特点:
- XHTML 2不向前兼容,甚至不兼容之前的HTML
- 去除样式类标签
- 去除 img、a
- 彻底修改 Form
- 开发者不欢迎,浏览器不支持
WHATWG:与W3C决裂
W3C闭门造车的作风引起了一些人的不满,来自Opera,Apple,以及Mozilla的代表开始表达反对声音。2004年,Opera的 Ian Hickson提议在HTML基础上进行扩展以适应新的Web应用,该提议遭到W3C的拒绝。于是,他们自发组织成立了超文本应用技术工作组,就是WHATWG。
从WebApps1.0到HTML 5
一开始,WHATWG的主要工作包括两部分,Web Forms 2.0和Web Apps 1.0,它们都是HTML的扩展,后来,他们合并到一起成为现在的HTML 5规范。在WHATWG致力于HTML 5的同时,W3C继续他们的XHTML 2.0。
2006年10月,Web之父Tim Berners-Lee发表了一篇博客文章,表示,从HTML走向XML的路是行不通的,几个月后,W3C组建了一个新的HTML工作组,他们非常明智地选择了WHATWG的成果作为基础。直到2009年,W3C宣布终止XHTML 2的工作。
HTML 5
2008年,W3C HTML5 草案发布。
2012年12月19号,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血历时三年的HTML5规范已经正式定稿。
HTML5 设计思想:
- 兼容已有内容
- 避免不必要的复杂性
- 解决现实的问题
- 优雅降级
- 尊重事实标准
- 用户 》开发者 》浏览器厂商 》标准制定者 》理论完美
HTML5 中的变化:
- doctype、meta
- 新增语义化标签和属性
- 去掉纯展示性标签
- canvas、video、audio、离线、本地存储、拖拽等
HTML5 语法特点:
- 标签不区分大小写,推荐小写
- 空标签可以不闭合,比如 input、meta
- 属性不必引号,推荐双引号
- 某些属性值可以省略,比如 required、readonly
HTML 中的文本标签
p 标签
定义和用法
<p> 标签定义段落。p 元素会自动在其前后创建一些空白。
实例1
<p>This is some text in a very short paragraph</p>
h1 到 h6 标签
定义和用法
<h1> 到 <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
实例1
2
3
4
5
6<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
hr 标签
定义和用法
<hr> 标签在 HTML 页面中创建一条水平线。一般用于段落级别的话题切换。
实例1
2
3<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
列表标签
有序列表:ol 标签
定义和用法
<ol> 标签定义有序列表。
实例1
2
3
4
5
6<h1>世界电影票房排行榜</h1>
<ol start="1">
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>复仇者联盟</li>
</ol>
说明:
- 属性
start
规定有序列表的起始值。- <li> 标签定义列表项目,可用在有序列表(<ol>)和无序列表(<ul>)中
无序列表:ul 标签
定义和用法
<ul> 标签定义无序列表。
实例1
2
3
4
5
6
7
8
9
10
11
12<ul>
<li>1个西瓜</li>
<li>2瓶矿泉水</li>
<li>1盒酸奶</li>
<li>
垃圾袋
<ul>
<li>大号垃圾袋</li>
<li>小号垃圾袋</li>
</ul>
</li>
</ul>
说明:
ul
标签可以嵌套使用表示多层列表
定义列表:dl 标签
定义和用法
<dl> 标签定义了定义列表。
<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
实例1
2
3
4
5
6
7
8
9
10
11<h3>霸王别姬</h3>
<dl>
<dt>导演:</dt>
<dd>陈凯歌</dd>
<dt>主演:</dt>
<dd>张国荣</dd>
<dd>张丰毅</dd>
<dd>巩俐</dd>
<dt>上映日期:</dt>
<dd>1993-01-01</dd>
</dl>
引用标签
blockquote 标签
定义和用法
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
实例1
2
3
4<blockquote cite="http://t.cn/RfjKO0F">
天才并不是自生自长在深林荒野里的怪物, 是由可以使天才生长
的民众产生、长育出来的,所以没有 这种民众,就没有天才。
</blockquote>
说明:属性
cite
为可选的属性,规定引用的来源。
q 标签
定义和用法
<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。
实例1
<q>Here is a short quotation here is a short quotation</q>
说明:<q> 与 <blockquote> 的区别
两者本质是一样的。区别在于它们的显示和应用。
- <q>标签一般用于简短的行内引用,而比较长的部分一般使用<blockquote> 标签
- <q>标签一般会在引用内容的周围添加引号,而<blockquote> 标签不会添加引号,它会在左、右两边进行缩进。
cite 标签
定义和用法
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
实例1
<p>我最喜欢的一本书是<cite>小王子</cite>。</p>
预格式化文本:pre 标签
定义和用法
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是结合<code> 标签用来表示计算机的源代码。
实例1
2
3
4<pre><code>
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
</code></pre>
内容划分
<article> 标签
<article> 标签规定独立的自包含内容。
<header> 标签
<header> 标签定义文档的页眉(介绍信息)。
<section> 标签
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<footer> 标签
<footer> 标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
实例1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<article>
<header>
<h1>字体排印学</h1>
<p>作者:XXX</p>
</header>
<section>
<h2>语源及其范围</h2>
<p>在当代,字体排印学的相关研究和实践范围相当广...</p>
<p>以字体排印为核心的图像中,通常使用四项基本手...</p>
</section>
<section>
<h2>可读性和易读性</h2>
<p>可读性和易读性经常被混淆。可读性通常用...</p>
<p>与之相对,易读性描述的是排印文本阅读时的...</p>
</section>
<footer>
<h2>参考链接</h2>
<nav>
<ul>
<li><a href="">衬线字体</a></li>
<li><a href="">字体设计</a></li>
</ul>
</nav>
</footer>
</article>
强调标签
标签 | 用法 |
---|---|
strong | 把文本定义为语气更强的强调的内容 |
em | 从一句话中突出某个词语 |
b | 将词语从视觉上和其它部分区分,比如一篇论文摘要中的关键词 |
i | 显示斜体文本效果 |
dfn | 可标记那些对特殊术语或短语的定义 |
abbr | 指示简称或缩写 |
code | 用于表示计算机源代码或者其他机器可以阅读的文本内容 |
kbd | 定义键盘文本 |
var | 表示变量的名称,或者由用户提供的值 |
samp | 表示一段用户应该对其没有什么其他解释的文本字符 |
说明:可以在 abbr 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。
上标和下标
<sup> 标签:定义上标文本。
<sub> 标签:定义下标文本。
实例1
2<p>E = MC<sup>2</sup></p>
<p>CO<sub>2</sub></p>
插入和删除
<del> 标签:定义文档中已被删除的文本。
<ins> 标签:定义已经被插入文档中的文本。
实例1
<p><del>原价:299元</del> <ins>双11特价:188元</ins></p>
换行控制
<br> 标签
<br> 标签可插入一个简单的换行符。该标签是空标签(意味着它没有结束标签,这样写<br></br>是错误的)。
<wbr> 标签
Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。
实体字符
实体字符 | 代表字符 |
---|---|
& |
& |
> |
> |
< |
< |
© |
© |
¥ |
¥ |
☯ |
☯ |